/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { Component } from 'react'
import Nowplaying from './films/Nowplaying'
import Comingsoon from './films/Comingsoon'
import { NavLink, Redirect, Route, Switch } from 'react-router-dom'
import { Button, Space, Swiper, Toast, Tabs } from 'antd-mobile'

import style from './css/Film.module.css'

export default class Films extends Component {
    constructor(props){
        super()
        this.changeTab = this.changeTab.bind(this)
        this.state = {
            activeName: 'fruits'
        }
    }
    changeTab(data)  {
        console.log(this.props)
        if (data === '/films/nowplaying'){
            this.props.history.push(`/films/nowplaying`)
            // this.setState({
            //     activeName: 'fruits'
            // })
        }else {
            this.props.history.push(`/films/comingsoon`)
        //    setTimeout(()=>{
        //     this.setState({
        //         activeName: 'vegetables'
        //     })
        //    })
            console.log(this.props)
        }


    }
    render() {
        const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

        return (
            <div className={style.film + " aaaa"}>
                <div style={{ height: "200px", background: "yellow" }}>
                    <Swiper>{
                        colors.map((color, index) => (
                            <Swiper.Item key={index}>
                                <div
                                    className={style.content}
                                    style={{ background: color }}
                                    onClick={() => {
                                        Toast.show(`你点击了卡片 ${index + 1}`)
                                    }}
                                >
                                    {index + 1}
                                </div>
                            </Swiper.Item>
                        ))
                    }</Swiper>
                </div>
                
                {/* <ul>
                    <li>
                        <NavLink to="/films/nowplaying" activeClassName={style.kerwinactive}>正在热映</NavLink>
                    </li>
                    <li>
                        <NavLink to="/films/comingsoon" activeClassName={style.kerwinactive}>即将上映</NavLink>
                    </li>
                </ul> */}
                <div>
                    <Tabs onChange={
                        this.changeTab
                    }
                    activeKey={this.props.location.pathname}
                    >
                        <Tabs.Tab title='正在热映' key='/films/nowplaying'>
                            {/* <NavLink to="/films/nowplaying" activeClassName={style.kerwinactive}>正在热映</NavLink> */}
                        </Tabs.Tab>
                        <Tabs.Tab title='即将上映' key='/films/comingsoon'>
                         {/* <NavLink to="/films/comingsoon" activeClassName={style.kerwinactive}>即将上映</NavLink> */}
                        </Tabs.Tab>
                     
                    </Tabs>
                </div>
                {/* 路由配置 嵌套路由 */}
                {/* <Nowplaying/> */}
                <Switch>
                    <Route path="/films/nowplaying" component={Nowplaying} />
                    <Route path="/films/comingsoon" component={Comingsoon} />
                    <Redirect from="/films" to="/films/nowplaying" />
                </Switch>

            </div>
        )
    }
}
